<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import Editor from './components/Editor.vue';
import { Environment } from '@/api/code/environment/type';
import { getCodeContent, getEnvironmentInfoByCodeId, stopCode } from '@/api/code';
import { CodeContent } from '@/api/code/type';

const environment = ref({} as Environment)
const codeId = ref('');
const codeContent = ref({} as CodeContent);
const show = ref(false);

onMounted(async () => {
    const route = useRoute();
    const id = route.query.id;
    if (id != null && !Array.isArray(id)) {
        codeId.value = id;
        getEnvironmentInfoByCodeId(id as string).then((res) => {
            environment.value = res.data as Environment;
        })
        const res = await getCodeContent(codeId.value);
        codeContent.value = res.data as CodeContent;
        show.value = true;
    }
})

onUnmounted(() => {
    stopCode(codeId.value);
})

</script>

<template>
    <div class="container" v-if="show">
        <Editor class="editor" v-model:codeId="codeId"
            v-model="environment" v-model:codeContent="codeContent"
        />
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    .editor {
        height: calc(100%);
    }
}
</style>